<template>
  <div class="learn learn-situation">
    <Header :isGoBack="false">
      <template v-slot:right>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>
    <div class="learn-ctx">
      <div class="ctx-header" @click="select($event)">
        <div class="header-1" :class="{ active: !curTag }">日</div>
        <div class="header-2" :class="{ active: curTag === 1 }">月</div>
        <div class="header-3" :class="{ active: curTag === 2 }">自定义</div>
        <div class="header-4">
          <!-- 日 -->
          <div class="day-picker" v-show="!curTag">
            <el-date-picker
              v-model="day"
              type="date"
              value-format="yyyy-MM-dd"
              @change="changeDay(0)"
              placeholder="选择日期"
              :picker-options="closeTime0"
              :clearable="false"
            >
            </el-date-picker>
          </div>
          <!-- 月 -->
          <div class="month-picker" v-show="curTag === 1">
            <el-date-picker
              v-model="month"
              type="month"
              @change="changeDay(1)"
              value-format="yyyy-MM"
              placeholder="选择月"
              :picker-options="closeTime2"
              :clearable="false"
            >
            </el-date-picker>
          </div>
          <div class="month-picker" v-show="curTag === 2">
            <el-date-picker
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model="defaultDate"
              @change="changeDay(2)"
              value-format="yyyy-MM-dd"
              placeholder="自定义"
              :picker-options="closeTime0"
              :clearable="false"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="ctx-main" id="main">
        <div>
          <child5 ref="child5" :title="title"></child5>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { findStudyProcess } from "@/api/index.js";
import {disposeDate} from '@/utils/dateUtil.js';
import Header from "@/components/Header.vue";
import child5 from "./children/child5.vue";
export default {
  name: "EnglishWebIndex",
  components: {
    Header,
    child5,
  },
  data() {
    return {
      title: "今日",
      curTag: 0, //当前选择器0 1 2
      day: "", //日
      month: "", //月
      closeTime0: {},
      closeTime2: {},
      defaultDate: "",
    };
  },
  watch: {
    curTag(newV) {
      if (newV == 0) {
        this.title = "今日";
      } else if (newV == 1) {
        this.title = "本月";
      } else {
        this.title = "该时间段";
      }
    },
  },
  created() {
    this.$nextTick(() => {
      this.classInfo = JSON.parse(localStorage.getItem("bookData"));
      this.classInfo.beginTime=disposeDate(this.classInfo.start_time)
      console.log(this.classInfo.beginTime,"this.classInfo.beginTime");
      this.init(); //初始化日期选择器
      this.changeDay(0); //初始化数据
    });
  },
  mounted() {},

  methods: {
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    // 日周月切换
    select(p) {
      let reg1 = RegExp(/header-1/),
        reg2 = RegExp(/header-2/),
        reg3 = RegExp(/header-3/),
        pp = p.target.className;
      if (reg1.exec(pp)) {
        this.curTag = 0;
        this.changeDay(0);
      } else if (reg2.exec(pp)) {
        this.curTag = 1;
        this.changeDay(1);
      } else if (reg3.exec(pp)) {
        this.curTag = 2;
        // this.changeDay(2);
      }
    },
    // 日期选择器值变更后
    changeDay(p) {
      console.log(this.defaultDate, 6666666666666);
      console.log(JSON.parse(localStorage.getItem("bookData")), "data");
      const data = {
        book_id: 0,
        class_id: 0,
      };

      if (p == 0) {
        if (!this.day) {
          this.getPassYearFormatDate();
        }
        Object.assign(data, { create_time: this.day });
      } else if (p === 1) {
        if (!this.month) {
          this.getPassYearFormatDate();
        }
        Object.assign(data, { year_time: this.month });
      } else if (p === 2) {
        Object.assign(data, {
          week_time: this.defaultDate[0],
          end_time: this.defaultDate[1],
        });
      }
      this.$bus.$emit("openLoading");
      // 获取子组件数据
      findStudyProcess(data)
        .then((res) => {
          this.$bus.$emit("closeLoading");
          if (res.code === 200) {
            this.refFunc(res.data);
            console.log(res.data, "test");
          }
        })
        .catch((err) => {
          this.$bus.$emit("closeLoading");
        });
    },
    // 初始化选择器
    init() {
      this.getPassYearFormatDate(); //初始化
      var vue = this;
      let beginTime = this.classInfo.beginTime;
      this.closeTime0 = {
        disabledDate(time) {
          return (
            time.getTime() < new Date(beginTime) ||
            time.getTime() > Date.now() - 8.64e6
          );
        },
      };
      this.closeTime1 = {
        disabledDate(time) {
          let timeOptionRange = vue.timeOptionRange;
          let secondNum = 60 * 60 * 24 * 8 * 1000;
          if (timeOptionRange) {
            return (
              (time.getTime() !== timeOptionRange.getTime() + secondNum &&
                time.getTime() !== timeOptionRange.getTime() - secondNum) ||
              time.getTime() > Date.now() - 8.64e6 ||
              time.getTime() < new Date(beginTime)
            );
          } else {
            return (
              time.getTime() < new Date(beginTime) ||
              time.getTime() > Date.now() - 8.64e6
            );
          }
        },
        onPick(time) {
          //当第一时间选中才设置禁用
          if (time.minDate && !time.maxDate) {
            vue.timeOptionRange = time.minDate;
          }
          if (time.maxDate) {
            vue.timeOptionRange = null;
          }
        },
      };
      this.closeTime2 = {
        disabledDate(time) {
          return (
            time.getTime() < new Date(beginTime) ||
            time.getTime() > Date.now() - 8.64e6
          );
        },
      };
    },
    getPassYearFormatDate() {
      var nowDate = new Date();
      var date = new Date(nowDate);
      date.setDate(date.getDate() - 8);
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var formatDate = year + seperator1 + month + seperator1 + strDate;
      this.getNowFormatDate(formatDate);
    },
    getNowFormatDate(formatDate) {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var nowData = year + seperator1 + month + seperator1 + strDate;
      this.day = year + "-" + month + "-" + strDate;
      this.week = [formatDate, nowData]; // 默认赋值前段时间 共9天
      this.month = year + "-" + month; //默认月选择器值
    },
    // 通知子组件获取数据
    refFunc(p) {
      this.$refs.child5 && this.$refs.child5.drawMap(p); //child1的初始数据
    },
  },
};
</script>

<style lang="scss" scoped>
.learn {
  width: 100%;
  height: 100%;
  background: url("~@/assets/img/组 133.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

  .learn-ctx {
    width: 1200px;
    background: #fff;
    margin: 11px auto 79px;

    .ctx-header {
      height: 92px;
      padding-left: 30px;
      padding-right: 30px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .header-1,
      .header-2,
      .header-3 {
        width: 72px;
        height: 32px;
        background: #fff;
        border: 1px solid #EC7B32;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #EC7B32;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
      }

      .header-1 {
        border-radius: 4px 0px 0px 4px;
        border-right: none;
      }

      .header-3 {
        border-radius: 0px 4px 4px 0px;
        margin-right: 20px;
        border-left: none;
      }

      .active {
        background: #EC7B32;
        color: #fff;
      }

      .header-4 {
        flex: 1;
      }

      .header-5 {
        width: 94px;
        cursor: pointer;

        img {
          margin-right: 10px;
        }

        span {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #1271ff;
        }
      }
    }
  }
}

.header-4 >>> .el-input__inner {
  width: 240px;
  height: 32px;
  line-height: 32px;
}

.header-4 >>> .el-input--prefix {
  line-height: 32px;
}

.header-4 >>> .el-input__icon {
  position: relative;
  top: -3px;
}

.header-4 >>> .el-range-separator {
  line-height: 25px;
}
</style>
